<template>
  <el-dialog v-model="open" :show-close="false" :title="title" @open="initOpen" @close="close"
    custom-class="assess-dialog" destroy-on-close width="1200px">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" v-loading="formLoading"
      :scroll-to-error="true">
      <el-space direction="vertical">
        <div shadow="never" class="assess">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="任务编号：" prop="code">
                <el-input v-model="form.code" clearable :disabled="!!form.id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务名称：" prop="name">
                <el-input v-model="form.name" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="border-bottom">
            <el-col :span="24">
              <el-form-item label="任务描述：" prop="info">
                <el-input v-model="form.info" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" resize="none"
                  clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="border-bottom">
            <el-form-item label="评估对象" style="display:block;width: 100%;" prop="evaluationObject">
              <el-col :span="24">
                <el-row justify="space-between">
                  <el-checkbox-group v-model="form.evaluationObject">
                    <el-checkbox v-for="item in evaluationObject" :key="item.value" :label="item.value">
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-row>
              </el-col>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="地震输入方式" style="display:block;width: 100%;" prop="inputMethod">
              <el-col :span="24">
                <el-row justify="space-between">
                  <el-radio-group v-model="form.inputMethod" class="column" @change="inputMethodChange">
                    <el-radio :label="1" size="large">
                      <el-space>
                        <span>设定烈度（VI、VII、VIII、IX、X）</span>
                      </el-space>
                    </el-radio>
                    <el-radio :label="2" size="large">
                      <el-space>
                        <span>设定地震影响场</span>
                        <el-form-item prop="influenceField" style="margin: 0!important">
                          <el-input v-model="form.influenceField" style="width: 300px;"
                            :disabled="form.inputMethod != '2'"></el-input>
                        </el-form-item>
                        <el-button plain @click="chooseInfluenceField" :disabled="form.inputMethod != '2'">选择版本</el-button>
                      </el-space>
                    </el-radio>
                  </el-radio-group>
                </el-row>
              </el-col>
            </el-form-item>
          </el-row>
        </div>
      </el-space>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveOrUpdate" auto-insert-space>保存</el-button>
        <el-button @click="close" plain auto-insert-space>取消</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 选择数据源 -->
  <InfluenceField v-model:open="influenceFieldOpen" :selected="form.influenceField" @getInfluence="getInfluence" />
</template>
<script setup>
import { saveOrUpdateTask, getById } from '@/api/lifelineProject/taskManage'
import InfluenceField from '@/views/lifelineProject/taskManage/components/influenceField.vue'
import { evaluationObject } from '@/views/lifelineProject/index'

const props = defineProps({
  open: Boolean,
  id: String
})
const emits = defineEmits(['update:open', 'updateList'])
const { proxy } = getCurrentInstance()
const initForm = () => ({
  inputMethod: 1,
  evaluationObject: []
})
const form = ref(initForm())
const title = computed(() => props.id ? '修改任务' : '新建任务')
const formLoading = ref(false)
const influenceFieldRequired = (rule, value, cb) => {
  if (form.value.inputMethod == '2') {
    if (form.value[rule.field]) {
      cb()
    } else {
      cb(new Error(rule.message))
    }
  } else {
    cb()
  }
}
const rules = {
  // code: [{ required: true, message: '请填写任务编号！', trigger: 'blur' }],
  name: [{ required: true, message: '请填写任务名称！', trigger: 'blur' }],
  info: [{ required: true, message: '请填写任务描述！', trigger: 'blur' }],
  evaluationObject: [{ required: true, message: '请选择评估对象！', trigger: 'change' }],
  inputMethod: [{ required: true, message: '请选择地震输入方式！', trigger: 'change' }],
  influenceField: [{ validator: influenceFieldRequired, message: '请选择地震影响场数据版本！', trigger: 'change' }]
}

const initOpen = () => {

}
// 选择影响场数据
const influenceFieldOpen = ref(false)
const chooseInfluenceField = () => {
  influenceFieldOpen.value = true
}
const getInfluence = val => {
  form.value.influenceField = val
}

const inputMethodChange = val => {
  if (val == 1) {
    form.value.influenceField = null
  }
}

// 保存
const saveOrUpdate = () => {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      if(form.value.id){
        proxy.$modal.confirm('修改任务后计算结果被清空，确认修改吗？').then(function () {
          saveTask()
        }).catch(() => { })
      }else{
        saveTask()
      }
    }
  })
}
const saveTask = () => {
  formLoading.value = true
  saveOrUpdateTask({ ...form.value, evaluationObject: form.value.evaluationObject.join(',') }).then(res => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess(form.value.id ? '修改成功！' : '新增成功！')
      formLoading.value = false
      emits('updateList')
      close()
    }
  }).catch(err => {
    formLoading.value = false
  })
}

// 关闭
const close = () => {
  proxy.resetAllForm(form.value, initForm())
  emits('update:open', false)
}
watch(() => props.id, () => {
  if (props.id) {
    formLoading.value = true
    getById(props.id).then(res => {
      form.value = res.data
      form.value.evaluationObject = form.value.evaluationObject.split(',')
      formLoading.value = false
    }).catch(() => formLoading.value = false)
  }
})
</script>

<style lang="scss" scoped>
.el-form-item.el-form-item--default {
  margin: 18px 0;
}
:deep(.el-space) {
  width: 100%;

  &>.el-space__item {
    width: 100%;
  }
}

.assess {
  border-radius: 4px;
  border: 1px solid #e4e7ed;

  .border-bottom {
    border-bottom: 1px solid var(--el-border-color-light);
    ;
  }

  .el-row {
    padding: 0 20px;
  }

  .title {
    font-weight: bold;
  }

  :deep(.column.el-radio-group) {
    flex-direction: column;
    align-items: start;

    &>.el-radio {
      &>.el-radio__label {
        &>.el-space {
          &>.el-space__item:first-of-type {
            margin-right: 50px !important;
          }
        }
      }
    }
  }
}
</style>